<template>
  <div class="page">
    <div class="detail">
      <el-card class="box-card">
        <div class="text item">
          <h5>还存在的问题</h5>
          <h6>-内部用id获取dom，非常原始，后续可以改成ref获取dom</h6>
          <h6>
            -组件封装粗糙，同一个组件由于id冲突无法一个页面内重复调用，数据也是固定写在组件内的
          </h6>
          <h6>-……</h6>
        </div>
      </el-card>
    </div>
    <div class="map"><MapChart mapId="mapiddemo" test="123" :dataSet="data" /></div>
    <div class="map"><MapChart mapId="mapiddemo1" test="123" :dataSet="data" /></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import MapChart from "@/components/MapChart.vue";

export default defineComponent({
  name: "echartMap",
  components: {
    MapChart,
  },
  data() {
    return {
      data: [
        { name: "北京市", value: "51" },
        { name: "上海市", value: "41" },
        { name: "浙江省", value: "31" },
        { name: "陕西省", value: "21" },
        { name: "山西省", value: "11" },
        { name: "江西省", value: "61" },
        { name: "广西壮族自治区", value: "71" },
        { name: "内蒙古自治区", value: "91" },
        { name: "新疆维吾尔自治区", value: "81" },
        { name: "宁夏回族自治区", value: "61" },
        { name: "西藏自治区", value: "71" },
        { name: "甘肃省", value: "61" },
        { name: "青海省", value: "41" },
        { name: "安徽省", value: "31" },
        { name: "江苏省", value: "91" },
        { name: "重庆市", value: "51" },
        { name: "四川省", value: "31" },
        { name: "河南省", value: "11" },
        { name: "黑龙江省", value: "21" },
        { name: "河北省", value: "31" },
        { name: "广东省", value: "41" },
        { name: "辽宁省", value: "71" },
        { name: "吉林省", value: "81" },
        { name: "湖北省", value: "61" },
        { name: "湖南省", value: "41" },
        { name: "贵州省", value: "31" },
        { name: "福建省", value: "21" },
        { name: "云南省", value: "31" },
        { name: "山东省", value: "41" },
        { name: "海南省", value: "91" },
      ],
    };
  },
  mounted() {
    console.log(
      "%c  pages/echartMap mounted  ",
      "background: linear-gradient(114deg, rgba(133,114,134,1) 0%, rgba(107,106,108,1) 100%);font-size:20px;line-height: 20px;color:#fff;"
    );
  },
});
</script>


<style lang="stylus" scoped>
.page {
  display: flex;
  flex-direction: row;

  .detail {
    width: 40%;
  }

  .map {
    width: 50%;
  }
}
</style>